<template>
    <div v-show="show" >
        <div class="modal" @click.self="clickMask">
        <div class="modal-dialog" :class="modalClass" v-el:dialog>
            <div class="modal-content">
                <!--Header-->
                <div class="modal-header">
                    <slot name="header">
                        <a type="button" class="close" @click="cancel">x</a>
                        <h4 class="modal-title">
                            <slot name="title">
                                {{title}}
                            </slot>
                        </h4>
                    </slot>
                </div>
                <!--Container-->
                <div class="modal-body">
                    <slot></slot>
                </div>
                <!--Footer-->
                <div class="modal-footer">
                    <slot name="footer">
                        <button type="button" :class="okClass" @click="ok">{{okText}}</button>
                        <button type="button" :class="cancelClass" @click="cancel">{{cancelText}}</button>
                    </slot>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop in"></div>
    </div>
</template>

<script>
     export default {
        props: {
            show: {
                type: Boolean,
                twoWay: true,
                default: false
            },
            title: {
                type: String,
                default: 'Modal'
            },
            small: {
                type: Boolean,
                default: false
            },
            large: {
                type: Boolean,
                default: false
            },
            full: {
                type: Boolean,
                default: false
            },
            // 为true时无法通过点击遮罩层关闭modal
            force: {
                type: Boolean,
                default: false
            },
            // 自定义组件transition
            transition: {
                type: String,
                default: 'modal'
            },
            // 确认按钮text
            okText: {
                type: String,
                default: '确定'
            },
            // 取消按钮text
            cancelText: {
                type: String,
                default: '取消'
            },
            // 确认按钮className
            okClass: {
                type: String,
                default: 'hrc-tag-button'
            },
            // 取消按钮className
            cancelClass: {
                type: String,
                default: 'hrc-tag-button-common'
            },
            // 点击确定时关闭Modal
            // 默认为false，由父组件控制prop.show来关闭
            closeWhenOK: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                duration: null
            };
        },
        computed: {
            modalClass () {
                return {
                    'modal-lg': this.large,
                    'modal-sm': this.small,
                    'modal-full': this.full
                }
            }
        },
        created () {
            if (this.show) {
                document.body.className += ' modal-open';
            }
        },
        beforeDestroy () {
            document.body.className = document.body.className.replace(/\s?modal-open/, '');
        },
        watch: {
            show (value) {
                // 在显示时去掉body滚动条，防止出现双滚动条
                if (value) {
                    document.body.className += ' modal-open';
                }
                // 在modal动画结束后再加上body滚动条
                else {
                    if (!this.duration) {
                        this.duration = window.getComputedStyle(this.$el)['transition-duration'].replace('s', '') * 1000;
                    }

                    window.setTimeout(() => {
                        document.body.className = document.body.className.replace(/\s?modal-open/, '');
                    }, this.duration || 0);
                }
            }
        },
        methods: {
            ok () {
                this.$emit('ok');
                if (this.closeWhenOK) {
                    this.show = false;
                }
            },
            cancel () {
                this.$emit('cancel');
                this.show = false;
            },
            // 点击遮罩层
            clickMask () {
                if (!this.force) {
                    this.cancel();
                }
            }
        }
     };
</script>

<style>
    .modal-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        background-color: #CBCBCB;
        opacity: 0.4;
        filter: alpha(opacity=40);
    }
    .modal {
        display: block;
        position: fixed;
        top: 10%;
        left: 50%;
        z-index: 1050;
        width: 560px;
        margin-left: -280px;
        background-color: #ffffff;
        border: 1px solid #999;
        border: 1px solid rgba(0, 0, 0, 0.3);
        *border: 1px solid #999;
        outline: none;
        -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding-box;
        background-clip: padding-box;
    }

    .modal-header {
        padding: 1px 15px;
        border-bottom: 1px solid #eee;
        background: #f0f0f0;
    }

    .modal-header .close {
        float: right;
        font-size: 20px;
        font-weight: bold;
        line-height: 20px;
        color: #000000;
        text-shadow: 0 1px 0 #ffffff;
        opacity: 0.2;
        filter: alpha(opacity=20);
        margin-top: 22px;
    }

    .modal-header .close:hover,
    .modal-header .close:focus {
        color: #000000;
        text-decoration: none;
        cursor: pointer;
        opacity: 0.4;
        filter: alpha(opacity=40);
    }
    .modal-title{
        font-weight: normal;
        font-size: 16px;
        color: #3ca009;
        padding-left: 4px
    }
    .modal-title:before{
        content: "";
        position: absolute;
        top: 23px;
        left: 12px;
        height: 18px;
        border-left: 4px solid #3ca009;
    }

    .modal-body {
        position: relative;
        max-height: 400px;
        padding: 15px;
        overflow-y: auto;
    }

    .modal-footer {
        padding: 14px 15px 15px;
        margin-bottom: 0;
        text-align: right;
        background-color: #f5f5f5;
        border-top: 1px solid #ddd;
        -webkit-border-radius: 0 0 6px 6px;
        -moz-border-radius: 0 0 6px 6px;
        border-radius: 0 0 6px 6px;
        *zoom: 1;
        -webkit-box-shadow: inset 0 1px 0 #ffffff;
        -moz-box-shadow: inset 0 1px 0 #ffffff;
        box-shadow: inset 0 1px 0 #ffffff;
    }


    .modal-footer .hrc-tag-button,.modal-footer .hrc-tag-button-common {
        text-align: center;
        display: inline-block;
        cursor: pointer;
        padding: 8px 14px;
        font-weight: bold;
        font-family: 宋体;
        border-radius: 3px;
        overflow: visible;
    }
    .modal-footer .hrc-tag-button-common{
        background: #FFF;
        border-radius: 6px;
        color: #666;
        border: 1px solid #d2d2d2;
    }

    .modal-footer .hrc-tag-button{
        padding: 9px 14px;
        background: #4eb619;
        border-radius: 6px;
        color:white;
        border: 1px solid #4eb619;
    }
</style>




